<template>
  <div class="app-page">
    <aside-tree
      title="安检任务单"
      :tree-data="treeData"
      :mouse-button="false"
      :loading="$loadingPlugin.getTreeData"
      @currentChange="currentChange"
      @refresh="getTreeData"
    />
    <div class="content">
      <div v-for="i in entTypeList" :key="i.value" class="title-btn">
        <div><h2>{{ i.desc }}</h2></div>
        <div class="title-btn-col">
          <el-col v-for="it in i.cardList" :key="it.id" :span="5" @click.native="onCrad(i, it)">
            <el-card shadow="always" body-style="display: flex; align-items: center">
              <el-image style="width: 42px; height: 42px;" :src="it.image" />
              <p>{{ it.title }}</p>
            </el-card>
          </el-col>
        </div>
      </div>
    </div>
    <WaterConfig ref="water" />
    <Hidden ref="hid" />
    <PeriodSet ref="period" />
  </div>
</template>

<script>
  import { organizationQueryList, queryCsmTypeMap } from '@/api'
  import getTreeData from '@/utils/jsonTree'
  import AsideTree from '@/views/components/OrgTree'
  import WaterConfig from './components/WaterConfig'
  import Hidden from './components/Hidden.vue'
  import PeriodSet from './components/PeriodSet'

  export default {
    name: 'addition',
    components: {
      AsideTree,
      WaterConfig,
      Hidden,
      PeriodSet
    },
    data() {
      return {
        entTypeList: [],
        treeData: [],
        treeVal: {},
        query: {
          orgSNNo: ''
        }
      }
    },
    async created() {
      await this.getTreeData()
      await this.getEntType()
    },
    methods: {
      onCrad(i, it) {
        const obj = { ...i, ...it }
        const obj1 = {
          1: (obj) => {
            this.$refs.water.open(obj, this.treeVal)
          },
          2: (obj) => {
            this.$refs.water.open(obj, this.treeVal)
          },
          3: (obj) => {
            this.$refs.hid.open(obj, this.treeVal)
          },
          4: (obj) => {
            this.$refs.period.open(obj, this.treeVal)
          }
        }
        obj1[obj.id](obj)
      },
      // 选择组织机构变化
      currentChange(current) {
        if (current.orgSNNo) {
          this.query.orgSNNo = current.orgSNNo
          this.treeVal = current
        } else {
          this.$message({
            message: '请选择机构',
            type: 'warning'
          })
        }
      },
      // 获取组织机构数据
      async getTreeData() {
        const res = await organizationQueryList({})
        const data = res.data.map(item => ({
          label: item.orgName,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      // 客户类型
      async getEntType() {
        const res = await queryCsmTypeMap()
        const cardList = [
          { image: require('../../../assets/tely.png'), title: '随单安检项配置', id: 1 },
          { image: require('../../../assets/at.png'), title: '定期安检项配置', id: 2 },
          { image: require('../../../assets/chechk.png'), title: '定义安检隐患', id: 3 },
          { image: require('../../../assets/saf.png'), title: '安检周期设置', id: 4 }
        ]
        this.entTypeList = res.data.map(item => {
          return { ...item, cardList }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.app-page {
  display: flex;
  padding: 0;
  .content {
    flex: 1;
    width: 0;
    padding: 10px 10px 0 10px;
    overflow: auto;
    .title-btn {
      height: 160px;
      margin-right: 31px;
      margin-left: 31px;
      h2 {
        padding-left: 12px;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-size: 20px;
        font-weight: 700;
        color: #01999f;
        border-left: 3px solid #01999f;
      }
      &-col {
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
        flex-wrap: wrap;
        p {
          margin-left: 12px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0;
          color: #353c4e;
          text-align: left;
        }
      }
    }
  }
}
</style>
